<template>
	<div>
		<el-input v-model="input" style="width: 400px; margin: 10px" placeholder="商品搜索"/>
		<el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
		<el-button type="success" icon="el-icon-plus" @click="Dialog()">新建</el-button>
		<el-table :data="list" border style="width: 100%">
		<el-table-column fixed prop="id" label="商品编号"></el-table-column>
		<el-table-column prop="bookName" label="商品名称"> </el-table-column>
		<el-table-column prop="press" label="所属品类"></el-table-column>
		<el-table-column prop="num" label="单品库存"> </el-table-column>
		<el-table-column prop="status" label="商品状态"></el-table-column>
		<el-table-column fixed="right" label="操作">
			<template slot-scope="scope">
				<el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
				<el-button type="text" size="small" @click="delGoodsList(scope.row)">下架</el-button></template>
			</el-table-column>
		</el-table>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      		:current-page="pageCurrent" :page-sizes="[10,15]" :page-size="100"
      		layout="total, sizes, prev, pager, next, jumper" :total="total">
    	</el-pagination>
		<el-dialog title="添加商品" :visible.sync="dialogFormVisible">
			<el-form :model="form">
				<el-form-item label="作者" :label-width="formLabelWidth">
					<el-input v-model="form.author" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="商品名称" :label-width="formLabelWidth">
					<el-input v-model="form.bookName" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="书籍内容" :label-width="formLabelWidth">
					<el-input v-model="form.content" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="所属品类" :label-width="formLabelWidth">
					<el-input v-model="form.press" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="单品库存" :label-width="formLabelWidth">
					<el-input v-model="form.num" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="单价" :label-width="formLabelWidth">
					<el-input v-model="form.price" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="setGoodsList(form),dialogFormVisible = false">修改</el-button>
				<el-button type="primary" @click="addGoodsList(form),dialogFormVisible = false">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
	data() {
		return {
			input:'',
			currentRow: null,
      		pageCurrent: 1, //初始页
			pageSize: 10, // 每页的数据,
			dialogFormVisible: false,
			form: {
				bookName: '',
				press: '',
				num: '',
				author:'',
				content:'',
				price:''
			},
			formLabelWidth: '120px',
			list:[],
			// code:''
		};
	},
	async created() {
		let res = await this.getGoodsList({
			pageCurrent: this.pageCurrent,
			pageSize: this.pageSize
		})
	this.list = this.goodList
	},
	computed: {
		...mapState({
			goodList: (state) => state.goods.goodsList,
			total: (state) => state.goods.total
		})
	},
	watch: {
		input(current){
			if(current === ''){
				this.list = this.goodList
			}
		}
	},
	methods: {
		handleSizeChange: function(pageSize) {
			this.pageSize = pageSize;
			this.getGoodsList({
				pageCurrent: this.pageCurrent,
				pageSize: this.pageSize
			})
			this.list=this.goodList
		},
		handleCurrentChange: function(pageCurrent) {
			this.pageCurrent = pageCurrent;
			this.getGoodsList({
				pageCurrent: this.pageCurrent,
				pageSize: this.pageSize
			})
			this.list=this.goodList
		},
		Dialog() {
			this.dialogFormVisible = !this.dialogFormVisible;
			this.form = {
				author: "",
				bookName: "",
				content: "",
				num: "",
				press: "",
				price: ""
			}
		},
		handleClick(row) { 
			this.dialogFormVisible = true
			this.form = row
		},
		//删除数据(下架)
		delGoodsList:function(code){
																																
		},
		// 添加数据
		addGoodsList:function(form){
			
		},
		setGoodsList:function(form){

		},
		...mapActions({
			getGoodsList: "goods/getGoodsList",
			delGoodsList: "goods/delGoodsList",
			addGoodsList: "goods/addGoodsList",
			setGoodsList: "goods/setGoodsList"
		}),
		// 模糊搜索
		search(){
			let that = this
			if(this.input === '' || typeof(this.input) == 'undefined'){
				this.list = this.goodList
			} else {
				this.list = []
				this.goodList.map(function(item){
					if(item.bookName.search(that.input) != -1){
						that.list.push(item)
					} else if(item.press.search(that.input) != -1){
						that.list.push(item)
					}
				})
			}
		}
  	},
};
</script>

<style>

</style>